<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>财务及数据</el-breadcrumb-item>
			<el-breadcrumb-item>取消/撤回查询</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_140">
								<el-input v-model="s_task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item class="w_100">
								<el-select @change="changeBtn" v-model="selectValue" placeholder="市">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="s_type" placeholder="异常类型">
									<el-option label="异常类型" value=""></el-option>
									<el-option label="任务取消" value="cancel"></el-option>
									<el-option label="任务撤回" value="withdraw"></el-option>
								</el-select>
							</el-form-item>
							<!-- 数据联动-异常类型 -->
							<el-form-item class="w_140" v-if="s_type == ''">
								<el-input disabled placeholder="责任方"></el-input>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == ''">
								<el-input disabled placeholder="类型"></el-input>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == ''">
								<el-input disabled placeholder="原因"></el-input>
							</el-form-item>
							<!-- 数据联动-取消 -->
							<el-form-item class="w_140" v-if="s_type == 'cancel'">
								<el-select v-model="cancel.zrf" placeholder="责任方">
									<el-option
										v-for="(item, index) in all_revoke.cancel"
										:key="index"
										:label="item.name"
										:value="index + '|' + item.name"
										>{{ item.name }}</el-option
									>
								</el-select>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == 'cancel'">
								<el-select v-model="cancel.type" placeholder="类型">
									<el-option
										v-for="(item, index) in cancel_type"
										:key="index"
										:label="item.name"
										:value="index + '|' + item.name"
										>{{ item.name }}</el-option
									>
								</el-select>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == 'cancel'">
								<el-select v-model="cancel.reason" placeholder="原因">
									<el-option
										v-for="item in cancel_reason"
										:key="item.id"
										:label="item.title"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<!-- 数据联动-撤销 -->
							<el-form-item class="w_140" v-if="s_type == 'withdraw'">
								<el-select v-model="revoke.zrf" placeholder="责任方">
									<el-option
										v-for="(item, index) in all_revoke.withdraw"
										:key="index"
										:label="item.name"
										:value="index + '|' + item.name"
										>{{ item.name }}</el-option
									>
								</el-select>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == 'withdraw'">
								<el-select v-model="revoke.type" placeholder="类型">
									<el-option
										v-for="(item, index) in revoke_type"
										:key="index"
										:label="item.name"
										:value="index + '|' + item.name"
										>{{ item.name }}</el-option
									>
								</el-select>
							</el-form-item>
							<el-form-item class="w_140" v-if="s_type == 'withdraw'">
								<el-select v-model="revoke.reason" placeholder="原因">
									<el-option
										v-for="item in revoke_reason"
										:key="item.id"
										:label="item.title"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="datetime1">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="开始时间"
									v-model="date1"
								></el-date-picker>
							</el-form-item>
							<span style="position: relative; top: 3px;">~</span>
							<el-form-item prop="datetime2">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="结束时间"
									v-model="date2"
								></el-date-picker>
							</el-form-item>

							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="renList" stripe>
						<el-table-column prop="" label="任务编号" width="160px">
							<template slot-scope="{ row }">
								<span class="">{{ row.task_info.sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="" label="店铺名称" width="200">
							<template slot-scope="{ row }">
								<span>{{ row.task_info.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="" label="订单编号" width="150px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToMore(row)">{{ row.task_info.demand_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="140"></el-table-column>
						<el-table-column prop="task_info.area_name" label="商圈"></el-table-column>
						<el-table-column prop="" label="任务名称" width="140px">
							<template slot-scope="{ row }">
								<span>{{ row.task_info.job_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="subject_type" label="异常类型" width="100px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.subject_type == 'cancel'">任务取消</span>
								<span class="text-primary" v-if="row.subject_type == 'withdraw'">任务撤回</span>
							</template>
						</el-table-column>
						<el-table-column prop="responsibility" label="责任方" width="100px"></el-table-column>
						<el-table-column prop="reason_type" label="原因类型" width="100px"></el-table-column>
						<el-table-column prop="reason_title" label="原因" width="100px"></el-table-column>
						<el-table-column prop="remark" width="100px" label="取消备注"></el-table-column>
						<el-table-column prop="task_info.demand_day" label="需求天数"></el-table-column>
						<el-table-column prop="task_info.task_description" width="100px" label="需求备注"></el-table-column>
						<el-table-column prop="task_info.status" label="状态" width="120px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.task_info.status == '10'">待分配</span>
								<span class="text-primary" v-if="row.task_info.status == '20'">已分配</span>
								<span class="text-gray" v-if="row.task_info.status == '30'">已确认</span>
								<span class="text-warning" v-if="row.task_info.status == '40'">已签到</span>
								<span class="text-warning" v-if="row.task_info.status == '50'">已完成</span>
								<span class="text-default" v-if="row.task_info.status == '60'">已撤回</span>
								<span class="text-danger" v-if="row.task_info.status == '70'">已取消</span>
								<span class="text-success" v-if="row.task_info.status == '80'">已结算</span>
							</template>
						</el-table-column>
						<el-table-column prop="total" label="姓名" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.task_info.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total" label="手机号" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.task_info.mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="任务开始/结束时间" width="200px">
							<template slot-scope="{ row }">
								<span>{{ row.task_info.start_date }}/{{ row.task_info.start_time }}-{{ row.task_info.end_time }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="操作时间" width="150px"></el-table-column>
						<el-table-column prop="user_name" label="操作人" width="100px"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'personnelList',
	data() {
		return {
			id: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			renList: [{ id: 0 }], //数据集合
			total: 0, //总数量
			pageNum: 1, //当前页
			pageSizeNow: 20,
			s_task_sn: '', //任务编号
			s_type: '', //异常类型
			date1: '', //开始时间
			date2: '', //结束时间
			all_revoke: [],
			//撤销相关
			revoke: {
				zrf: '',
				type: '',
				reason: '',
				bz: ''
			},
			revoke_type: [], //撤销类型列表
			revoke_reason: [], //撤销原因列表
			//取消相关
			cancel: {
				zrf: '',
				type: '',
				reason: '',
				bz: ''
			},
			cancel_type: [], //取消类型列表
			cancel_reason: [], //取消原因列表
			selectValue: '', //获取id和value
			s_city_id: '',
			s_city_name: '',
			cityList: [],
			s_agent_id: '',
			agent_reset: 0
		}
	},
	computed: {
		//撤销相关
		poke_zrf() {
			return this.revoke.zrf.toString()
		},
		//撤销相关
		poke_type() {
			return this.revoke.type.toString()
		},
		//取消相关
		cancels_zrf() {
			return this.cancel.zrf.toString()
		},
		//取消相关
		cancels_type() {
			return this.cancel.type.toString()
		}
	},
	watch: {
		//异常类型改变
		s_type(newValue, oldValue) {
			this.revoke.zrf = '' //责任方清空
			this.revoke.type = '' //类型清空
			this.revoke.reason = '' //原因清空
			this.revoke.bz = '' //备注清空
			this.revoke_type = [] //撤销类型列表清空
			this.revoke_reason = [] //撤销原因列表清空

			this.cancel.zrf = '' //责任方清空
			this.cancel.type = '' //类型清空
			this.cancel.reason = '' //原因清空
			this.cancel.bz = '' //备注清空
			this.cancel_type = [] //取消类型列表清空
			this.cancel_reason = [] //取消原因列表清空
		},
		//撤销-责任方改变
		poke_zrf(newValue, oldValue) {
			if (newValue != '') {
				var arr = newValue.split('|')
				this.revoke.type = '' //类型清空
				this.revoke.reason = '' //原因清空
				this.revoke_type = [] //撤销类型列表清空
				this.revoke_reason = [] //撤销原因列表清空
				this.revoke_type = this.all_revoke.withdraw[arr[0]].child
			} else {
				this.revoke.type = '' //类型清空
				this.revoke.reason = '' //原因清空
				this.revoke_type = [] //撤销类型列表清空
				this.revoke_reason = [] //撤销原因列表清空
				this.revoke_type = []
			}
		},
		//撤销-类型改变
		poke_type(newValue, oldValue) {
			if (newValue != '') {
				var arr = newValue.split('|')
				this.revoke.reason = '' //原因清空
				this.revoke_reason = this.revoke_type[arr[0]].child
			} else {
				this.revoke.reason = '' //原因清空
				this.revoke_reason = []
			}
		},
		//取消-责任方改变
		cancels_zrf(newValue, oldValue) {
			if (newValue != '') {
				var arr = newValue.split('|')
				this.cancel.type = '' //类型清空
				this.cancel.reason = '' //原因清空
				this.cancel_type = [] //取消类型列表清空
				this.cancel_reason = [] //取消原因列表清空
				this.cancel_type = this.all_revoke.cancel[arr[0]].child
			} else {
				this.cancel.type = '' //类型清空
				this.cancel.reason = '' //原因清空
				this.cancel_type = [] //取消类型列表清空
				this.cancel_reason = [] //取消原因列表清空
				this.cancel_type = []
			}
		},
		//取消-类型改变
		cancels_type(newValue, oldValue) {
			if (newValue != '') {
				var arr = newValue.split('|')
				this.cancel.reason = '' //原因清空
				this.cancel_reason = this.cancel_type[arr[0]].child
			} else {
				this.cancel.reason = '' //原因清空
				this.cancel_reason = []
			}
		}
	},
	created() {
		//时间的默认选中
		this.date1 = this.date(0) + ' 00:00:00'
		this.date2 = this.date(0) + ' 23:59:00'

		//取消和撤销原因接口
		let fn = new FormData()
		this.$http.post(this.url + '/reason/reasonList', fn).then(
			res => {
				if (res.data.msg == '查询成功！' || res.data.code == '200') {
					this.all_revoke = res.data.data
				} else if (res.data.code == '8886') {
					//code   8886  登录过期
					sessionStorage.clear()
					this.$alert('登录已过期，请重新登录 !', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							window.location = 'login.html'
						}
					})
					return
				} else {
					this.$message.error(res.data.msg)
					return
				}
			},
			res => {
				this.$message.error('网络错误！')
				return
			}
		)
	},
	mounted() {},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		listUser() {
			//获取列表数据
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('task_sn', this.s_task_sn) //任务编号
			fn.append('subject_type', this.s_type) //异常类型
			fn.append('city_id', this.s_city_id) //城市ID
			fn.append('agent_id', this.s_agent_id)

			if (this.s_type == 'cancel') {
				if (this.cancel.zrf != '') {
					var arr = this.cancel.zrf.split('|')
					fn.append('responsible_party', arr[1]) //责任方
				}

				if (this.cancel.type != '') {
					var arr2 = this.cancel.type.split('|')
					fn.append('reason_type', arr2[1]) //类型
				}

				fn.append('reason_id', this.cancel.reason) //原因
			} else {
				if (this.revoke.zrf != '') {
					var arr = this.revoke.zrf.split('|')
					fn.append('responsible_party', arr[1]) //责任方
				}

				if (this.revoke.type != '') {
					var arr2 = this.revoke.type.split('|')
					fn.append('reason_type', arr2[1]) //类型
				}

				fn.append('reason_id', this.revoke.reason) //原因
			}

			if (this.date1 == null) {
				this.date1 = ''
			}
			fn.append('start_time', this.date1)
			if (this.date2 == null) {
				this.date2 = ''
			}
			fn.append('end_time', this.date2)

			this.$http.post(this.url + '/logTask/getList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							this.renList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.renList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			//判断时间框是否存在值
			if (this.date1 == null || this.date1 == '') {
				this.$message.error('请选择开始时间！')
				return
			}
			if (this.date2 == null || this.date2 == '') {
				this.$message.error('请选择结束时间！')
				return
			}
			this.pageNum = 1
			this.listUser()
		},

		async resetBtn() {
			// this.selectValue = `${this.cityList[0].id}|${this.cityList[0].city_name}`
			// this.s_city_id = this.cityList[0].id
			// this.s_city_name = this.cityList[0].city_name
			this.agent_reset += 1
			await this.resetData() //重置请求数据
			// await this.listUser()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1

			this.date1 = this.date(0) + ' 00:00:00' //开始时间
			this.date2 = this.date(0) + ' 23:59:00' //结束时间
			this.s_task_sn = ''
			this.s_type = ''

			this.revoke.zrf = '' //责任方清空
			this.revoke.type = '' //类型清空
			this.revoke.reason = '' //原因清空
			this.revoke.bz = '' //备注清空
			this.revoke_type = [] //撤销类型列表清空
			this.revoke_reason = [] //撤销原因列表清空

			this.cancel.zrf = '' //责任方清空
			this.cancel.type = '' //类型清空
			this.cancel.reason = '' //原因清空
			this.cancel.bz = '' //备注清空
			this.cancel_type = [] //取消类型列表清空
			this.cancel_reason = [] //取消原因列表清空
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listUser()
		},

		// 跳转任务详情
		goToMore(row) {
			console.log(row)
			var obj = {
				rl_id: row.task_info.demand_id,
				rl_sn: row.task_info.demand_sn,
				task_id: row.task_info.id,
				task_sn: row.task_info.sn,
				start_date: row.task_info.start_date
			}
			const { href } = this.$router.resolve({ path: '/roleMain', query: obj })
			window.open(href, '_blank')
		},

		downloadOrder() {
			//上岗时段列表-导出
			if (this.date1 == null) {
				this.date1 = ''
			}
			if (this.date2 == null) {
				this.date2 = ''
			}
			let responsible_party,reason_type,reason_id
			if (this.s_type == 'cancel') {
				if (this.cancel.zrf != '') {
					const arr = this.cancel.zrf.split('|')
					responsible_party = arr[1]//责任方
				}
				if (this.cancel.type != '') {
					const arr2 = this.cancel.type.split('|')
					reason_type = arr2[1] //类型
				}
				reason_id=this.cancel.reason//原因
			} else {
				if (this.revoke.zrf != '') {
					const arr = this.revoke.zrf.split('|')
					responsible_party = arr[1]//责任方
				}

				if (this.revoke.type != '') {
					const arr2 = this.revoke.type.split('|')
					reason_type = arr2[1] //类型
				}
				reason_id=this.cancel.reason//原因
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				export: 1,
				task_sn: this.s_task_sn,
				subject_type: this.s_type,
				responsible_party: responsible_party,
				reason_type: reason_type,
				reason_id: reason_id,
				start_time: this.date1,
				end_time: this.date2,
				agent_id: this.s_agent_id,
				city_id: this.s_city_id
			}
			let param = $.param(obj)
			window.location.href = this.url + '/logTask/getList?' + param
		},
		changeBtn() {
			if (this.selectValue == '') {
				this.s_city_id = ''
				this.s_city_name = ''
				return false
			}
			let [id, name] = this.selectValue.split('|') // es6 数组解构赋值
			this.s_city_id = id
			this.s_city_name = name
		},
		setValue(arrVal) {
			this.s_agent_id = arrVal.agent_id
			// this.cityList = arrVal.city_list
			// this.city_id = this.cityList[0].id
			// this.city_val = this.cityList[0].name

			this.cityList = arrVal.city_list
			let ret = this.cityList
			this.selectValue = `${ret[0].id}|${ret[0].name}`
			this.s_city_id = ret[0].id
			this.s_city_name = ret[0].name
			this.listUser()
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 778px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
.s_submit {
	right: -1px;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}
</style>



// WEBPACK FOOTER //
// src/components/cancelquerys/Cancelquery.vue